<template>
  <view class="content">
    <view class="uni-list">
      <view class="uni-media-list">
        <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in news" :key="index" @click="openinfo" :data-newsid="item.post_id">
          <view class="uni-media-list-body">
            <image class="uni-media-list-logo" :src="item.author_avatar"></image>
            <view class="uni-media-list-body">
              <view class="uni-media-list-text-top">{{item.title}}</view>
              <view class="uni-media-list-text-bottom uni-ellipsis">{{item.created_at}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
    export default {
        data() {
            return {
				news : [],
				};
	},
	onLoad: function() {
	  uni.showLoading({
	    title: "加载中...."
	  })
	  uni.request({
	    url: 'https://unidemo.dcloud.net.cn/api/news',
	    method: 'GET',
	    data: {},
	    success: res => {
	      this.news = res.data;
	      uni.hideLoading();
	    },
	    fail: () => {},
	    complete: () => {}
	  });
	},
	methods: {
	  openinfo(e) {
	    console.log(e);
	    var newsid = e.currentTarget.dataset.newsid;
	    uni.navigateTo({
	      url: '../detail/detail?newsid=' + newsid
	    });
	  }
	},
	}
</script>

<style>
    .content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	} 
	.uni-media-list-body{
		height: auto;
	}
	.uni-media-list-text-top{
		line-height:1.6em;
	}
</style>